<template>
	<view>
		<view class="search">
			<searchTemp></searchTemp>
		</view>
		<view class="tiaojian">
			<view :class="id==item.id?'active':''" v-for="item in xuanze" :key="item.id" @click="fresh(item.id)">
				{{item.item}}
			</view>

		</view>
		<view class="goods-box">
			<view class="goods-item" @click="toChanpin">
				<view class="goods-left">
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
					 mode="aspectFit" class="goods-left"></image>
				</view>
			
				<view class="goods-right">
					<view class="goods-name">
						华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
					</view>
					<view class="goods-newjifen">
						200 积分
					</view>
					<view class="goods-yuanjifen">266积分</view>
					<view class="goods-xijie">
						<view class="goods-haoping">好评 1%</view>
						<view class="goods-xiaoliang">销量 175</view>
						<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/kejian.png" mode="widthFix" class="is-kejian"></image>
						
					</view>
				</view>
			</view>
			<view class="goods-item">
					<view class="goods-left">
							<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/shouji.png"
						 mode="aspectFit" class="goods-left"></image>
					</view>
					<view class="goods-right">
						<view class="goods-name">
							华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
						</view>
						<view class="goods-newjifen">
							200 积分
						</view>
						<view class="goods-yuanjifen">266积分</view>
						<view class="goods-xijie">
							<view class="goods-haoping">好评 1%</view>
							<view class="goods-xiaoliang">销量 175</view>
							<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/bukejian.png" mode="widthFix" class="is-kejian"></image>
						</view>
					</view>
				</view>
			
		</view>
	</view>
</template>

<script>
	import searchTemp from '@/components/search-temp.vue'
	export default {
		components: {
			searchTemp
		},
		data() {
			return {
				id: 1,
				xuanze: [{
					item: "默认排序",
					id: 1
				}, {
					item: "消息",
					id: 2
				}, {
					item: "价格",
					id: 3
				}, {
					item: "积分区间",
					id: 4
				}],
			};
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.navName
			})
		},
		methods: {
			fresh(id) {
				this.id = id;

			},
			toChanpin(){
				uni.navigateTo({
					url: '../chanpin/chanpin',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.search {
		width: 100%
	}

	.tiaojian {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		height: 40px;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}

	.tiaojian view {
		line-height: 37px;
		color: rgba(153, 153, 153, 1);

	}

	.tiaojian .active {
		border-bottom: 3px solid #c49c5a;
		color: rgba(196, 156, 90, 1);
	}

	.goods-box {
		padding: 0 30upx;
		background: rgb(255, 255, 255);
	}

	.goods-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		padding: 20upx 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.goods-left {
		height: 100px;
		width: 100px;
	}

	.goods-right {
		
		padding-left: 30upx;
	}

	.goods-name {
		font-size: 15px;

		font-weight: bold;
	}

	.goods-newjifen {
		font-size: 18px;
		font-weight: bold;
		color: rgba(255, 86, 1, 1);
		line-height: 19px;
	}
	.goods-yuanjifen{
		font-size: 12px;
		color:rgba(153,153,153,1);
		text-decoration: line-through;
	}
	.goods-xijie{
		display: flex;
		flex-direction: row;
		color:rgba(153,153,153,1);
		font-size: 12px;
		align-items: center;
	}
	.goods-xijie view{
		margin-right: 10px;
	}
	.is-kejian{
		height: 10px;
		width: 12px;
	}
</style>
